<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="execute.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-execute"
        role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="execute.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-execute" role="tabpanel">
        <div class="mb-3">
          <label data-i18n="execute.program.label"></label>
          <form class="was-validated" novalidate="novalidate">
            <input id="sivExecuteProgram" type="text" class="form-control col-lg-8" data-i18n="execute.program.placeholder"
              required="required" />
            <div class="invalid-feedback" data-i18n="execute.program.invalid"></div>
          </form>

          <div class="form-check mt-2">
            <input type="checkbox" class="form-check-input" id="sivExecuteArgumentsCbx" />
            <label class="form-check-label" for="sivExecuteArgumentsCbx">
              <span data-i18n="execute.arguments.label"></span>
              <p class="form-text" data-i18n="execute.arguments.text"></p>
            </label>

            <div id="sivExecuteArguments"></div>
          </div>

          <div class="form-check mt-2">

            <input type="checkbox" class="form-check-input" id="sivExecuteInputCbx" />
            <label class="form-check-label" for="sivExecuteInputCbx" data-i18n="execute.input.label"></label>

            <div id="sivExecuteInputCbxContent" class="d-none">

              <div class="form-check">
                <input type="radio" id="sivExecutePipeRb" name="sieve-execute-input" class="form-check-input" value="execute/input/pipe" checked/>
                <label data-i18n="execute.input.pipe.title" class="form-check-label" for="sivExecutePipeRb"></label>
              </div>

              <div class="form-check">
                <input type="radio" id="sivExecuteInputRb" name="sieve-execute-input" class="form-check-input" value="execute/input/input"/>
                <label data-i18n="execute.input.input.title" class="form-check-label" for="sivExecuteInputRb"></label>

                <p data-i18n="execute.input.input.text" class="form-text"></p>

                <input id="sivExecuteInputName" type="text" class="form-control col-lg-8" data-i18n="execute.input.placeholder"
                value="Example" />
              </div>
            </div>
          </div>

          <div id="sivExecuteOutput" class="d-none mt-2">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="sivExecuteOutputCbx" />
              <label class="form-check-label" for="sivExecuteOutputCbx" data-i18n="execute.output.label"></label>

              <div id="sivExecuteOutputCbxContent"  class="d-none">
                <p class="form-text" data-i18n="execute.output.text"></p>
                <input id="sivExecuteOutputName" type="text" class="form-control col-lg-8"
                  data-i18n="execute.output.placeholder" value="Example" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div data-i18n="execute.help" style="white-space: pre-line" class="tab-pane fade form-text" id="sieve-widget-help"
        role="tabpanel"></div>
    </div>
  </div>
</div>